<template>
  <el-breadcrumb separator="/" class="mb-2 mx-2" style="vertical-align: bottom">
    <el-breadcrumb-item>
      <div class="flex align-center">
        <el-icon :size="18"><Setting /></el-icon>
        <span class="pl">设定</span>
      </div>
    </el-breadcrumb-item>
    <el-breadcrumb-item>消息回復設定</el-breadcrumb-item>
    <el-breadcrumb-item>开始使用消息</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="box-card" v-if="useLocale.isMob">
  <el-alert :title="fit.title" :description="fit.desc" type="warning" :closable="false" />
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      class="ec2-form mt-1"
      status-icon
      label-width="auto"
      label-position="top"
    >
      <el-form-item label="回覆內容" class="required-self">
        <el-tabs
          type="border-card"
          v-model="ruleForm.reply_type"
          style="width: 100%"
          @tab-change="tabsChange"
        >
          <el-tab-pane label="回覆文本" name="text">
            <el-input
              v-model="ruleForm.reply_message"
              type="textarea"
              autosize
            />
            <div class="text-tips-color font-sm mt-1">請輸入回覆內容</div>
          </el-tab-pane>
          <el-tab-pane label="回覆素材" name="material">
            <div class="avatar-uploader">
              <div v-if="ruleForm.m_id">
                <material-temp :info="tableData"></material-temp>
                <div class="flex justify-end mt-1">
                  <el-button
                    type="danger"
                    size="small"
                    plain
                    @click="delMaterial"
                    >删除</el-button
                  >
                </div>
              </div>
              <div v-else>
                <el-icon class="avatar-uploader-icon" @click="openMaterial"
                  ><Plus
                /></el-icon>
                <div class="text-tips-color font-sm mt-1">請選擇回覆素材</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item label-width="auto" style="margin-bottom: 0">
        <el-button size="large" type="primary" @click="submitForm()">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-card class="box-card" shadow="hover" v-else>
    <el-scrollbar class="scroll">
    <el-alert :title="content" type="warning" :closable="false" />
      <el-form
        ref="ruleFormRef"
        style="max-width: 650px"
        :model="ruleForm"
        class="ec2-form mt-1"
        status-icon
        label-width="200"
      >
        <el-form-item label="回覆內容" class="required-self">
          <el-tabs
            type="border-card"
            v-model="ruleForm.reply_type"
            style="width: 100%"
            @tab-change="tabsChange"
          >
            <el-tab-pane label="回覆文本" name="text">
              <el-input
                v-model="ruleForm.reply_message"
                type="textarea"
                autosize
                :clearable="true"
              />
              <div class="text-tips-color font-sm mt-1">請輸入回覆內容</div>
            </el-tab-pane>
            <el-tab-pane label="回覆素材" name="material">
              <div class="avatar-uploader">
                <div v-if="ruleForm.m_id">
                  <material-temp :info="tableData"></material-temp>
                  <div class="flex justify-end mt-1">
                    <el-button
                      type="danger"
                      size="small"
                      plain
                      @click="delMaterial"
                      >删除</el-button
                    >
                  </div>
                </div>
                <div v-else>
                  <el-icon class="avatar-uploader-icon" @click="openMaterial"
                    ><Plus
                  /></el-icon>
                  <div class="text-tips-color font-sm mt-1">請選擇回覆素材</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <el-form-item label-width="220" style="margin-bottom: 0">
        <el-button size="large" type="primary" @click="submitForm()">
          保存
        </el-button>
      </el-form-item>
    </template>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    title="选择素材"
    :before-close="handleClose"
    class="mydialog"
    destroy-on-close
    top="5vh"
    :fullscreen="fit.fullscreen"
  >
    <material></material>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { $getStart, $postStart } from "@api/setting";
import { $searchMaterial} from "@api/common";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import { useCommonStore } from "@/store/common";
import { useLocaleStore } from "@/store/locales";
import { useRouter } from "vue-router";
const useLocale = useLocaleStore();
const useCommon = useCommonStore();
const router = useRouter();
let content=ref('');
let fit = reactive({
  fullscreen: false,
  title:"",
  desc:""
});
if (useLocale.isMob) {
  fit.fullscreen = true;
} else {
  fit.fullscreen = false;
}
onMounted(() => {
  getInfo();
});

const ruleForm = reactive({
  m_id: "",
  reply_type: "text",
  reply_message: "",
  fb_account_id:"",
});
const tableData = ref({});
const tabsChange = (name: TabPaneName) => {
  console.log(name);
};
const getInfo = async () => {
const res = await $getStart();

  if (JSON.stringify(res.data) != "{}") {
    content.value=`当前操作粉丝专页：${res.data.fb_account_page}，最后更新时间：${res.data.update_time}`;
    fit.title=`当前操作粉丝专页：${res.data.fb_account_page}`;
    fit.desc=`最后更新时间：${res.data.update_time}`;
    Object.keys(ruleForm).forEach((key) => {
      ruleForm[key] = res.data[key];
    });
    console.log(res);
    if (res.data.reply_type == "material") {
      getMaterial();
    }
  }
};
const getMaterial = async () => {
  const res = await $searchMaterial({ m_id: ruleForm.m_id });
  tableData.value = res.data;
};

const delMaterial = () => {
  ruleForm.m_id = "";
};
const submitForm = async () => {
  if (ruleForm.reply_type == "text") {
    ruleForm.m_id = "";
  } else {
    ruleForm.reply_message = "";
  }
    const res = await $postStart(ruleForm);
    if (res.code == 0) {
      ElMessageBox.alert(res.msg, "提示", {
        confirmButtonText: "OK",
        type: "success",
        "show-close": false,
        callback: (action) => {
          refreshPage();
        },
      });
    }else{
       ElMessageBox.alert(res.msg, "提示", {
        confirmButtonText: "OK",
        type: "error",
        "show-close": false,
      });
    }
  
};
const confirm = () => {
  ruleForm.m_id = useCommon.mSelected.m_id;
  tableData.value = useCommon.mSelected;
  dialogVisible.value = false;
};
const dialogVisible = ref(false);
const openMaterial = () => {
  dialogVisible.value = true;
};

const refreshPage = () => {
  //location.reload();
  const currentRoute = router.currentRoute.value;
  console.log(currentRoute);
  router.replace(currentRoute);
  //router.replace({name: '404'});
};
</script>
<style>
.mydialog {
  .el-dialog__body {
    padding: 0 var(--el-dialog-padding-primary);
  }
}
.ec2-form {
  .el-form-item__content {
    line-height: 1;
  }
}
</style>
<style lang="scss" scoped>
.ec2-form {
  padding: 20px;
}
.box-card {
  display: inherit;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}
.avatar-uploader {
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    &:hover {
      border: 1px dashed var(--el-color-primary);
    }
  }
}
.scroll {
  height: calc(100vh - 320px);
}
</style>
